<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Bienvenido a BeeQuizz</title>
		<link rel="stylesheet" type="text/css" href="bootstrap-3/dist/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="bootstrap-3/dist/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.css">
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.min.css">
		
		<link rel="stylesheet" type="text/css" href="css/beequizz-mov.css">
		<link rel="stylesheet" type="text/css" href="css/beequizz.css">
		
		<!-- JQuery -->
		<script src="jquery/js/jquery-1.9.1.js"></script>
		<!-- UI JQuery -->
		<script src="jquery/js/jquery-ui-1.10.3.custom.js"></script>
		<!-- Beequizz JS -->
		<script src="jquery/js/beequizz.js"></script>
		<style>
		
		</style>
	</head>
	<body>
		<header class="page-header" id="dv-cabecera"  >
			<div id="logo">				
				<img alt="logo Beequizz" class="img-responsive" src="img/logoBeequizz-sm.jpg" width="70px" id="logo-lg" />
				<h2 style="float:left;"> BeeQuizz <br/> <small>Una nueva forma de evaluación</small></h2>
			</div>
			<div class="nuevoBloque"></div>							
		</header>
		<div class="navbar navbar-default navbar-static-top" role="navigation" id="dv-menu-principal">
			<div class="container">		
				<div class="navbar-headers" >
					<a href="login.html" class="navbar-brand"><img src="img/icono-mov.png"" border="0" id="logo-xs" width="20px" /> BeeQuizz</a>
					<form name="login"  action="j_spring_security_check"  method="post" class="text-right form-inline">
						<input type="text"  name="j_username"  placeholder="Usuario" class="input-sm">
						<input type="password" name="j_password" placeholder="Contraseña" class="input-sm">
						<button type="submit" class="btn btn-primary btn-sm"> Enviar </button>			
					</form>
					<div id="olvidoPassword" class="text-right">
						<a href="password.html"><em> Olvidaste tu contraseña? </em></a>
					</div>
					 
				</div>
			</div>
		</div>
		<div id="registro">
			<section >
				<h1><small><strong>Unete a nosotros</strong></small></h1>

				<form  class="form-horizontal" role="form" method="post" id="formulario">
					<div class="form-group">
						<label  for="nombre" class="hidden-xs col-sm-2 control-label">Nombre</label>
						<div class=" col-xs-6 col-sm-10">
							<input type="text" class="form-control span2" id="nombre" name="nombre" placeholder="Nombre"/> 
						</div>
					</div>
					
					<div class="form-group">
						<label for="apellidos" class="hidden-xs col-sm-2 control-label" >Appellidos</label>
						<div class="col-xs-8 col-sm-10 ">
							<input type="text" class="form-control span3" id="apellidos" name="apellidos" placeholder="Apellidos"/>
						</div>
					</div>
					
					<div class="form-group">
						<label for="mail" class="hidden-xs col-sm-2 control-label" >Email</label>
						<div class=" col-xs-8 col-sm-10">
							<input type="email" class="form-control span3" id="mail" name="mail" placeholder="email"/>
						</div>
					</div>
					
					<div class="form-group">
						<label for="apodo" class="hidden-xs col-sm-2 control-label" >Apodo</label>
						<div class="col-xs-6 col-sm-10 ">
							<input id="apodo" type="text" class="form-control span2" name="apodo" placeholder="Usuario" /> 
						</div>
					</div>
					<div class="form-group">
						<label for="password" class="hidden-xs col-sm-2 control-label" >Contraseña</label>	
						<div class="col-xs-6 col-sm-10" >
							<input type="password" class="form-control span2" id="password" name="password" placeholder="Contraseña"/>
						</div>
					</div>
					
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10 col-xs-offset-2 col-xs-6">
							<button type="submit" class="btn btn-primary">Guardar</button>
						</div>
					</div>
				</form>
			
			</section>
		</div>
       
       <script>
   		// Para hacer el submit del formulario
		$("#formulario").submit(function(event) {
			 
			event.preventDefault();
			verificarApodo();
			
			
		}); 
        
		function verificarApodo() {
			var apodo = $("#apodo").val();
			
			/*Verifico que es mi apodo*/
			var urlValidarUsuario = "dispatcher/usuario/validarUsuario";
			urlValidarUsuario += "?username=" + apodo ;
			$.getJSON(urlValidarUsuario, function(existe){
		 		
				if (existe == true) {
					alert(" Elige otro apodo ");
				} else {
		 			submitFormulario();
		 		}
			});
		}
		
		function submitFormulario() {
			var data = JSON.stringify($('#formulario').serializeObject());
			$.ajax({
				type: "POST",
				 url: "dispatcher/usuario/nuevoUsuario",
				 data: data,
				 beforeSend: function(xhr) {  
				     xhr.setRequestHeader("Accept", "application/json");  
				     xhr.setRequestHeader("Content-Type", "application/json");  
				 },  
				 success: function (datos) {
				     alert("Usuario registrado con exito");
				 }, 
				 complete:function(){
			            $("#formulario").each(function(){
			                this.reset();   //Here form fields will be cleared.
			            });
			     },
				 error : function (data, status, er) {
				 	alert("error" + data + " status " +status+" er:"+er );
				 }
			 }); 
		}
        </script>
        <script src="bootstrap-3/dist/js/bootstrap.min.js"></script>
	</body>


</html>